<template>
	<view class="flex" :class="isLeft==true?'':' flex-direction'">
		<image v-if="imgList.length>0" @tap="viewImg" v-for="(img,index) in imgList" :data-url='img' :data-index='index' :key="index" 
			class="solid margin-right-sm " :class='imgClass'
			:src="img"
			:mode="mode"
			:style="mode==''?'width:'+width+';height:'+width:'width:'+width" @error="errImg(index)" />
	</view>
</template>

<script>
	import Vue from 'vue'
	export default {
		data() {
			return {
				imgList:[],
				errImgIndex:[],
				isEmpty:false
			};
		},
		name: 'img-list',
		props: {
			img: {
				type: String,
				default: ''
			},
			imgs: {
				type: Array,
				default: []
			},
			width:{
				type:String,
				default:"50px"
			},
			mode:{
				type:String,
				default:""
			},
			isLeft:{
				type:[Boolean, String],
				default:true
			},
			imgClass:{
				type:String,
				default:""
			}
		},
		created() {
			if(this.img!=''){
				this.imgList=[this.img]
			}else if(this.imgs.length>0){
				let list=[]
				this.imgs.forEach((item)=>{
					list.push(item.url)
				})
				this.imgList=list
			}else{
				this.imgList=["/static/img_no.png"]
				this.isEmpty=true
			}
		},
		methods: {
			viewImg(e) {
				if(this.isEmpty){
					return
				}
				let index=e.currentTarget.dataset.index
				let findIndex=this.errImgIndex.findIndex((i)=>{
					return i==index
				})
				if(findIndex==-1){
					uni.previewImage({
						urls: this.imgList,
						current: e.currentTarget.dataset.url,
					});
				}
			},
			errImg(index){
				Vue.set(this.imgList,index,"/static/img_err.png")
				this.errImgIndex.push(index)
			}
		}
	};
</script>